// download: http://codepen.io/anon/pen/Qboqbo


// Telling Vue to use the router
Vue.use(VueRouter)

// Initializing the router with options
var router = new VueRouter({
  history: false
});

// Redirect certain routes to other routes
router.redirect({
  '/': '/users/list'
})

// Define your routes here.  
// NOTE: You'd normally do something
// like require('./home/index.vue') for the component
router.map({
  // Not found handler
  '*': {
    component: {
      template: 
        '<div>' +
          '<h1>Not Found</h1>' +
        '</div>'
    }
  },
  '/users': { 
    component: {
      template: 
        '<div>' + // Wrap your views in one root html node so that the transitions work
          '<h1>Users</h1>' + 
          '<ul class="nav nav-tabs">' +
            '<li><a v-link="/users/list">List</a></li>' + 
            '<li><a v-link="/users/create">Create</a></li>' +
          '</ul>' +
          '<br>' +
          // <router-view></router-view> is where the nested sub route views will appear.
          // If you want the transitions to happen here you can copy the attributes on the router-view in codepen's HTML view and paste it here.
          '<router-view></router-view>' + 
        '</div>'
    },
    subRoutes: {
      '/list': {
        component: {
          template: 
            '<div>' +
              '<ul><li><a v-link="/users/1/profile">Rick James</a></li></ul>' +
            '</div>'
        }
      },
      '/create': {
        component: {
          template: 
            '<form>' +
              '<div class="form-group">' +
                '<input class="form-control" type="text">' +
              '</div>' +
              '<button class="btn btn-primary">Create</button>' + 
            '</form>'
        }
      },
      '/:id': {
        component: {
          template: 
            '<div>' + 
              '<h1>User Settings</h1>' +
              '<ul class="nav nav-tabs">' +
                '<li><a v-link="/users/{{route.params.id}}/profile">Profile</a></li>' + 
                '<li><a v-link="/users/{{route.params.id}}/posts">Posts</a></li>' +
              '</ul>' +
              '<br>' +
              '<router-view></router-view>' +
            '</div>'
        },
        subRoutes: {
          '/profile': {
            component: {
              template: '<div>Name: Rick James<br>Email: rick@james.com</div>'
            }
          },
          '/posts': {
            component: {
              template: '<div><ul><li>Post Name 1</li><li>Post Name 2</li></ul></div>'
            }
          }
        }
      }
    }
  },
  '/different': { 
    component: {
      template: '<div>' + 
          '<h1>Different</h1><p>{{ test }}</p>' +
        '</div>',
      data: function() {
        return {
          test: 'Hello I am a data variable from Vue.JS'
        }
      }
    }
  },
  '/about': { 
    component: {
      template: 
        '<div>' +
          '<h1>About</h1>' +
          '<p>' +
            'Well my father was a gambler down in Georgia,<br>' + 
            'He wound up on the wrong end of a gun.<br>' +
            'And I was born in the back seat of a Greyhound bus<br>' +
            'Rollin\' down highway 41.<br><br>' +
            'Lord, I was born a ramblin\' man,<br>' +
            'Tryin\' to make a livin\' and doin\' the best I can.<br>' +
            'And when it\'s time for leavin\',<br>' +
            'I hope you\'ll understand,<br>' +
            'That I was born a ramblin\' man.' +
          '</p>' +
        '</div>'
    }
  }
});

// Declaring the app itself
var App = Vue.extend()

// Initializing the whole thing together
router.start(App, '#app')
